<template>
  <div class="wms-container">
      <p class="bread-crumb">
          <strong>当前位置：</strong>
          <router-link to="/forum">社区</router-link>/
          <router-link to="/forum-details">详情页</router-link>
      </p>
      <div class="page-layout">
        <div class="forum-content">
            <div class="forum-title">
                <h2>{{this.forumContent.forumTitle}}</h2>
            </div>
            <div class="ql-container ql-snow">
                <div class="ql-editor" v-if="this.forumContent.forumContent!=null" v-html="this.forumContent.forumContent">
                </div>
            </div>
        </div>
        <div class="remark-content">
            <quill-editor @blur="blurValidate" :class="[validateResult ? 'validate-error' : '', 'editor']"  v-model="remarkContent" :options="quillOption"></quill-editor>
            <p class="remark-release" @click="releaseRemark(remarkContent)">发表</p>
            <div v-if="remarkDataList.length == 0">
                <p class="blank-remark">暂无评论，我来发表第一篇评论！</p>
            </div>
            <div v-else>
                <remark-list :remarkData="remarkDataList" :editorOption ="quillOption"></remark-list>
            </div>
        </div>
      </div>
  </div>
</template>
<style scoped>
.validate-error .ql-container.ql-snow,.validate-error .ql-toolbar.ql-snow{
  border-color: #ff0000;
}
.blank-remark{
    text-align: center;
    padding: .5rem 0;
}
.ql-editor{
    padding: 0;
}
.ql-container.ql-snow{
    border: none;
}
.forum-content .ql-container.ql-snow{
    height: auto !important;
}
.wms-content{
    overflow: hidden;
}
.wms-container{
   width: 80%;
   border-radius: .5rem;
   margin: 0 auto;
}
.bread-crumb{
    padding-bottom: .2rem;
}
.page-layout{
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  height: 100%;
  box-shadow: 0 0 .1rem rgba(0, 0, 0, .1);
}
.forum-content{
  flex: 1;
  padding: .2rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: .01rem solid #f3f3f3;
  height: 100%;
  font-size: .16rem;
}
.remark-content{     
    padding: .2rem;
    width: 40%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.forum-title{
    padding-bottom: .2rem;
}
.remark-release{
  margin: .1rem 0 0 0;
  display: inline-block;
  padding: .05rem .25rem;
  line-height: .3rem;
  font-size: .14rem;
  color: #fff;
  background-color: #009a61;
  border-color: #008151;
  border-radius: .04rem;
 }
 .remark-content .ql-containe{
     height: .5rem;
 }
</style>

<script>
import eventBus from '@/utils/common/eventBus'
import remarkList from '@/components/remark-list' 
import { quillEditor } from "vue-quill-editor"
export default {
    components:{
        remarkList,
        quillEditor
    },
    data(){
        return{
            forumFlag:null,
            forumList:[],            
            validateResult:false,
            forumContent:"",
            parentID:null,
            remarkContent: null,
            remarkFlagContent:null,
            childReply:null,
            remarkFlag:true,
            quillOption: {
                placeholder: "请输入评论内容",
                theme: 'snow',
                modules:{
                    toolbar: {
                    container: [
                            ["link", "image","underline", "strike","code-block",{ color: [] }, { background: [] }],
                            
                        ],
                    },
                },
            },
            remarkData:[],
            remarkDataList:[],
            replyRemarkTemplate:{
                forumID:this.forumFlag,
                user:null,
                parentID:null,
                replyedUser:null,
                remarkID:null,
                remarkContent:null
            }
        }
    },
    mounted(){
        this.forumFlag=this.$route.query.forumFlag;
        this.forumList=this.$storage.getStorage("forum");
        this.forumList.forEach(value => {
            if(value.forumID==this.forumFlag){
                this.forumContent=value;
            }
        });
        this.replyRemarkTemplate.forumID =this.forumFlag;
        this.replyRemarkTemplate.user =sessionStorage.getItem("user");
        this.filterRemark(this.$storage.getStorage("remark"));
        eventBus.$on("emitReplyRemark", (parentID,replyedUser) => {
            this.remarkFlagContent =`<strong>@${replyedUser}</strong>：`;
            this.parentID =parentID;
            this.remarkContent = this.remarkFlagContent;

        });
    },
    methods:{
        validate () {
            if (this.remarkContent == null||this.remarkContent == '') {
                this.validateResult = true;
            }
            else{
                this.validateResult = false;
            }
            return this.validateResult;
        },
        blurValidate(){
            this.validate()
        },
        releaseRemark(remarkContent){
            // if(this.validate){
            //     return;
            // }
            console.log(remarkContent.indexOf('<p>'+this.remarkFlagContent),remarkContent,'<p>'+this.remarkFlagContent)
            this.remarkFlag=remarkContent.indexOf('<p>'+this.remarkFlagContent)==0?true:false;
            if(this.remarkFlag){
                this.replyRemarkTemplate.parentID = this.parentID;
            }
            this.remarkData =  this.$storage.getStorage("remark")==null?[]:this.$storage.getStorage("remark");
            this.replyRemarkTemplate.remarkID=this.$common.formatDate();
            this.replyRemarkTemplate.remarkContent=this.$common.escapeStringHTML(remarkContent);
            this.remarkData.unshift(this.replyRemarkTemplate);
            if(this.remarkData.length > 20){
                this.remarkData=this.remarkData.slice(0,20)
            }
            this.$storage.setStorage("remark",this.remarkData);
            this.filterRemark(this.remarkData);
            this.replyRemarkTemplate.parentID = null;
            this.remarkContent =null;
        },
        filterRemark(allRemark){
            this.remarkDataList =[];
            if(allRemark!=null){
                allRemark.forEach(value => {
                    if(value.forumID == this.forumFlag){
                        this.remarkDataList.push(value);
                    }
                })            
                this.remarkDataList = this.translateDataToTree(this.remarkDataList);
            }
        },
        /**
         * 该方法用于将有父子关系的数组转换成树形结构的数组
         * 接收一个具有父子关系的数组作为参数
         * 返回一个树形结构的数组
         */
        translateDataToTree(data) {
            //没有父节点的数据
            let parents = data.filter(value => value.parentID == 'undefined' || value.parentID == null)            
            //有父节点的数据
            let children = data.filter(value => value.parentID !== 'undefined' && value.parentID != null)            
            //定义转换方法的具体实现
            let translator = (parents, children) => {
                //遍历父节点数据
                parents.forEach((parent) => {
                //遍历子节点数据
                    children.forEach((current, index) => {
                        //此时找到父节点对应的一个子节点
                        if (current.parentID === parent.remarkID) {
                            //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                            let temp = JSON.parse(JSON.stringify(children))
                            //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                            temp.splice(index, 1)
                            //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                            translator([current], temp)
                            //把找到子节点放入父节点的children属性中
                            typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                        }
                    })
                })
            }        
            //调用转换方法
            translator(parents, children)        
            //返回最终的结果
            return parents
        }
    },
    destroyed(){
        this.remarkDataList = null;
        eventBus.$off('emitReplyRemark', {})
    }
}
</script>

<style>

</style>